import React from 'react';
import { Row, Col, Card, Typography, Anchor, Button, Space, Divider } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Title, Paragraph } = Typography;
const { Link: AnchorLink } = Anchor;

const knowledgeList = [
  {
    id: 'env',
    title: '开发环境与项目结构',
    desc: 'Node.js、npm/yarn安装，Create React App初始化，依赖管理，目录结构说明。',
    page: '/',
    btn: '首页'
  },
  {
    id: 'jsx',
    title: 'JSX与组件化',
    desc: 'JSX语法、函数组件与类组件、props/state、父子通信、组件嵌套。',
    page: '/examples',
    btn: '示例页面'
  },
  {
    id: 'lifecycle',
    title: '类组件生命周期',
    desc: 'constructor、componentDidMount、shouldComponentUpdate、componentDidUpdate、componentWillUnmount等生命周期函数。',
    page: '/examples',
    btn: '生命周期示例'
  },
  {
    id: 'context',
    title: 'Context 跨层数据',
    desc: 'Context创建、Provider/Consumer、全局状态管理、主题/用户信息传递。',
    page: '/examples',
    btn: 'Context示例'
  },
  {
    id: 'hoc',
    title: '高阶组件（HOC）',
    desc: 'HOC原理、代码复用、权限控制、日志增强等场景。',
    page: '/examples',
    btn: 'HOC示例'
  },
  {
    id: 'hooks',
    title: 'React Hooks',
    desc: 'useState、useEffect、useContext、useReducer等常用Hooks，函数式组件开发。',
    page: '/examples',
    btn: 'Hooks示例'
  },
  {
    id: 'router',
    title: '路由与页面跳转',
    desc: 'React Router配置、嵌套路由、动态路由、导航菜单。',
    page: '/articles',
    btn: '文章列表'
  },
  {
    id: 'axios',
    title: '数据请求与交互',
    desc: 'Axios使用、数据获取、接口对接、异步处理。',
    page: '/articles',
    btn: '文章列表'
  },
  {
    id: 'antd',
    title: 'Ant Design UI库',
    desc: 'Antd组件使用、表单、按钮、布局、消息提示等。',
    page: '/login',
    btn: '登录页'
  },
  {
    id: 'crud',
    title: '实战：博客系统',
    desc: '注册/登录、文章增删改查、评论、权限、数据流。',
    page: '/articles',
    btn: '文章管理'
  },
  {
    id: 'test',
    title: '测试与调试',
    desc: 'Jest/React Testing Library单元测试、集成测试、调试技巧。',
    page: '/examples',
    btn: '测试用例'
  },
  {
    id: 'optimize',
    title: '性能优化与代码分割',
    desc: 'React.memo、shouldComponentUpdate、React.lazy、Suspense、按需加载。',
    page: '/examples',
    btn: '优化示例'
  },
  {
    id: 'deploy',
    title: '打包与部署',
    desc: 'Webpack打包、Nginx/Docker部署、CI/CD、运维监控、安全配置。',
    page: '/DEPLOY.md',
    btn: '部署文档',
    external: true
  }
];

const KnowledgeMap: React.FC = () => {
  const navigate = useNavigate();

  return (
    <Row gutter={32} style={{ minHeight: '80vh', marginTop: 24 }}>
      <Col xs={24} sm={18} md={18} lg={18} xl={18}>
        <Card bordered style={{ minHeight: 600 }}>
          <Typography>
            <Title level={2} id="top">React 博客项目知识点总览</Title>
            <Paragraph type="secondary">
              本页面梳理了本项目涉及的所有React核心知识点，点击右侧目录可快速定位，点击每个知识点下的按钮可跳转到实际功能页面体验。
            </Paragraph>
            <Space direction="vertical" size={32} style={{ width: '100%' }}>
              {knowledgeList.map(item => (
                <div key={item.id} id={item.id} style={{ scrollMarginTop: 80 }}>
                  <Title level={4}>{item.title}</Title>
                  <Paragraph>{item.desc}</Paragraph>
                  <Button
                    type="link"
                    onClick={() => {
                      if (item.external) {
                        window.open(item.page, '_blank');
                      } else {
                        navigate(item.page);
                      }
                    }}
                  >
                    {item.btn}
                  </Button>
                  <Divider />
                </div>
              ))}
            </Space>
          </Typography>
        </Card>
      </Col>
      <Col xs={0} sm={6} md={6} lg={6} xl={6}>
        <Anchor affix offsetTop={100} style={{ background: '#fff', padding: 16, borderRadius: 8 }}>
          <AnchorLink href="#top" title="知识点总览" />
          {knowledgeList.map(item => (
            <AnchorLink key={item.id} href={`#${item.id}`} title={item.title} />
          ))}
        </Anchor>
      </Col>
    </Row>
  );
};

export default KnowledgeMap; 